const { default: styled } = require("styled-components");

const OptionWarrper = styled.div`
  position: sticky;
  top: 0;
  z-index: 999;
  margin-bottom: 30px;
  background-color: var(--themeColorv1);
  box-shadow: 0 -1px var(--themeColorv1);
  padding: 10px 10px;
  width: 100%;
  a {
    margin-right: 40px;
    color: var(--themeFontColor);
  }
  @media (max-width: 950px) {
    a {
      margin-right: 30px;
      color: black;
    }
  }
  @media (max-width: 850px) {
    a {
      margin-right: 20px;
      color: black;
      font-size: 12px;
    }
  }
  @media (max-width: 750px) {
    a {
      margin-right: 10px;
      color: black;
      font-size: 10px;
    }
  }
  .active {
    color: rgb(30, 206, 156);
    border-bottom: 3px solid rgb(30, 206, 156);
    padding-bottom: 10px;
  }
`;

export default OptionWarrper;
